<template>
  <div>
    <a-drawer
      :title="titleMap[state]"
      :width="500"
      :visible.sync="visible"
      :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }"
      @close="close"
    >
      <a-form :form="form">
        <a-form-item :label="$t('user.v131')">
          <a-input
            v-decorator="[
              'ApprovalName',
              { rules: [{ required: true, message: $t('user.v135') }] },
            ]"
            :placeholder="$t('user.v135')"
          />
        </a-form-item>
        <a-form-item :label="$t('user.v136')">
          <a-input
            v-decorator="[
              'ApprovalAlias',
              { rules: [{ required: true, message: $t('user.v137') }] },
            ]"
            :placeholder="$t('user.v137')"
          />
        </a-form-item>
        <a-form-item :label="$t('user.v138')">
          <a-select
            mode="multiple"
            @change="changeselect"
            v-decorator="[
              'ApprovalUser',
              { rules: [{ required: true, message: $t('user.v139') }] },
            ]"
            :placeholder="$t('user.v139')"
            option-filter-prop="children"
            :filter-option="filterOption"
            @search="getuserlist"
            show-search
          >
            <a-select-option
              v-for="item in userList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div
        class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center"
      >
        <a-button
          :style="{ marginRight: '20px' }"
          class="w-[200px]"
          @click="close"
          >{{ $t("user.email.required11") }}</a-button
        >
        <a-button
          :loading="loading"
          class="w-[200px]"
          type="primary"
          @click.native.prevent="submit()"
        >
          <span v-if="!loading">{{ $t("app.setting.weakmode") }}</span>
          <span v-else
            >{{ $t("user.verification-code.required1115661107") }}...</span
          >
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { getUserList, userQuerySearch } from "@/api/common/form";
import { userQuery } from "@/api/common/form";
import { createGroups } from "@/api";
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      titleMap: ["新增", "修改"],
      state: 0,
      groupsId: "",
      userList: [],
    };
  },
  methods: {
    // 实时查询用户列表
    async getuserlist(value) {
      // console.log(value);
      this.inputValue = value;
      const { data } = await userQuerySearch({
        YtAdminName: value,
        types: 1,
      });
      this.userList = data;
    },
    async open(state = 0, data = {}) {
      this.state = state;
      this.groupsId = data.Id;
      this.visible = true;
      data.ApprovalUserList.forEach((element) => {
        element.value = parseInt(element.value);
      });
      this.userList = data.ApprovalUserList;
      if (state == 1) {
        let arr = [];
        data.ApprovalUserList.forEach((item) => {
          arr.push(parseInt(item.value));
        });
        await this.$nextTick();
        this.form.setFieldsValue({
          ApprovalName: data.ApprovalName,
          ApprovalAlias: data.ApprovalAlias,
          ApprovalUser: arr,
        });
      }
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    changeselect() {},
    // 提交
    submit() {
      const {
        form: { validateFields },
      } = this;
      const functionId = this.functionId;
      this.loading = true;
      validateFields(
        ["ApprovalName", "ApprovalAlias", "ApprovalUser"],
        { force: true },
        async (err, values) => {
          if (!err) {
            try {
              values.ApprovalUser = values.ApprovalUser.join(",");
              console.log(values);
              const res =
                this.state == 0
                  ? await createGroups({ ...values, ApprovalType: 1 })
                  : await createGroups({
                      ...values,
                      ApprovalType: 1,
                      Id: this.groupsId,
                    });
              this.$emit("succeed");
              this.$message.success(
                this.$t("user.verification-code.required111566110577308")
              );
              this.close();
            } catch (error) {
              console.log(error);
              this.$message.error(error);
            } finally {
              this.loading = false;
            }
          } else {
            setTimeout(() => {
              this.loading = false;
            }, 600);
          }
        }
      );
    },
    close() {
      this.visible = false;
      this.form.resetFields();
    },
  },
};
</script>

<style></style>